<template>
  <div class="h-auto-full border">
    <div class="loading-box border" >
      <div v-if="true">dfasd  true</div>
      <div v-else>dfasd  false</div>
      <div>dfasd</div>

       <ele-loading :eleLoading="eleLoading"></ele-loading>
    </div>
    <div class="loading-box border">
    </div>

    <h2 class="center">新闻列表</h2>
    <table-list v-if="articlesList.length>0" class="table-list"
      :dataList='articlesList' v-loading='articlesList.length <= 0'
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)" @detailNews='detailNews'>
    </table-list>
    <!-- <table-list  :dataList='articlesList'></table-list> -->
  </div>
</template>
<script>
import { mapGetters, mapActions, mapMutations } from 'vuex';
import TableList from './components/TableList';

export default {
  components: {
    TableList,
  },
  computed: {
    ...mapGetters({
      articlesList: 'articles/get_actions_list',
      articleDetail: 'articles/article_detail',
    }),
  },
  mounted() {
    this['articles/axios_get_articles']();
    setTimeout(() => {
      this.loading.show = false;
    }, 3000);
    setTimeout(() => {
      this.eleLoading = false;
    }, 3000);
  },
  methods: {
    ...mapActions('articles', ['getArticles']),
    ...mapActions(['articles/axios_get_articles']),
    ...mapMutations(['articles/get_articles_detail']),
    detailNews(e) {
      this['articles/get_articles_detail'](e.id);
      this.$alert(this.articleDetail, e.title, {
        dangerouslyUseHTMLString: true,
      });
    },
  },
  data() {
    return {
      vloading: true,
      loading: {
        show: true,
        text: '拼命1加载中...',
        bg: 'rgba(0, 0, 0, 0.8)',
        color: '#fff',
      },
      eleLoading: true,
    };
  },
};
</script>
<style lang="scss" scoped>
.loading-box {
  width: 100%;
  height: 500px;
  position: relative;
}
.center {
  margin: 30px 0;
}
.articles {
  width: 100%;
  height: 100%;
}
.table-list {
  width: 100%;
  min-height: 500px;
}
</style>

